<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>订单详情页面</title>
    <link
            rel="stylesheet"
            href="https://g.alicdn.com/code/lib/bootstrap/4.5.3/css/bootstrap.min.css"
    />
    <style>
        body {
            background-color: #f8f9fa;
            color: #333;
            font-family: "Helvetica Neue", Arial, sans-serif;
        }

        .container {
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }

        .order-title {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #343a40;
        }

        .order-info {
            margin-bottom: 30px;
        }

        .order-info-item {
            margin-bottom: 10px;
        }

        .order-info-label {
            font-weight: bold;
            color: #495057;
        }

        .order-products {
            margin-top: 30px;
        }

        .product-item {
            border-bottom: 1px solid #dee2e6;
            padding: 15px 0;
        }

        .product-image {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 4px;
        }

        .product-name {
            color: blue;
            text-decoration: underline;
        }

        .product-price {
            color: #e74c3c;
            font-weight: bold;
        }

        .order-total {
            font-size: 24px;
            font-weight: bold;
            color: #e74c3c;
            margin-top: 20px;
            text-align: right;
        }

        .btn-primary {
            background-color: #e74c3c;
            border: none;
            font-size: 18px;
            font-weight: bold;
            padding: 10px 20px;
            transition: all 0.3s ease;
        }

        .btn-primary:hover,
        .btn-primary:focus {
            background-color: #c0392b;
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);
        }
    </style>
</head>

<body>
<div>

</div>
<div class="container mt-4">
    <div class="d-flex justify-content-end">
        <a href="/" target="_blank" class="btn btn-primary btn-sm"
           style="padding: .25rem .5rem; font-size: .875rem; line-height: 1.5; border-radius: .2rem; color: #fff; background-color: #007bff; border-color: #007bff;"
        >返回商品秒杀页面</a>
    </div>
    <hr/>
    <h3 class="order-title">订单详情</h3>
    <div class="order-info">
        <div class="row">
            <div class="col-md-6">
                <div class="order-info-item">
                    <span class="order-info-label">订单编号：</span>
                    <span id="orderId" th:text="${orderInfo.orderId}"></span>
                </div>
                <div class="order-info-item">
                    <span class="order-info-label">下单时间：</span>
                    <span id="orderTime" th:text="${#dates.format(orderInfo.gmtCreate,'yyyy-MM-dd HH:mm:ss')}"></span>
                </div>
            </div>
            <div class="col-md-6">
                <div class="order-info-item">
                    <span class="order-info-label">订单状态：</span>
                    <span id="orderStatus"><b>抢购成功</b></span>
                </div>
                <div class="order-info-item">
                    <span class="order-info-label">支付方式：</span>
                    <span id="paymentMethod">在线支付</span>
                </div>
            </div>
        </div>
    </div>

    <div class="order-products">
        <h3>商品清单</h3>
        <div th:each="item : ${orderInfo.orderItemDTOList}" class="row product-item">
            <div class="col-md-2">
                <img th:src="${productInfo.pic}" th:alt="${productInfo.title}" class="product-image">
            </div>
            <div class="col-md-5">
                <a target="_blank" th:href="@{'/product/' + ${item.productId} + '.htm'}">
                    <div class="product-name" th:text="${productInfo.title}"></div>
                </a>
                <div>规格：默认</div>
            </div>
            <div class="col-md-2 text-right">
                <div class="product-price"
                     th:text="'单价：¥' + ${#numbers.formatDecimal(item.amount/100, 1, 2)}"></div>
            </div>
            <div class="col-md-1 text-center">
                <div th:text="'数量：'+${item.quantity}"></div>
            </div>
            <div class="col-md-2 text-right">
                <div class="product-total"
                     th:text="'总额：¥' + ${#numbers.formatDecimal(item.amount * item.quantity/100, 1, 2)}"></div>
            </div>
        </div>
    </div>
    <div class="order-total"
         th:text="'总计：¥' + ${#numbers.formatDecimal(orderInfo.amount/100, 1, 2)}"></div>
</div>


<script src="https://g.alicdn.com/code/lib/jquery/3.7.1/jquery.min.js"></script>
<script src="https://g.alicdn.com/code/lib/bootstrap/4.5.3/js/bootstrap.min.js"></script>
</body>
</html>